<template>
  <div class="num-main">
    <div class="num-card">
      <div>全网拓扑图</div>
      <el-button style="margin-top: 24px" type="primary" @click="openUcenter">全网拓扑</el-button>
    </div>
    <div class="num-card">
      <div>网络设备总数</div>
      <div class="num">
        {{ alarmNum.total }}
      </div>
    </div>
    <div class="num-card">
      <div>异常网络设备</div>
      <div class="num" :class="checkNum(alarmNum.resourceNum) ? 'red' : ''" @click="openNetMonitor('A')">
        {{ alarmNum.resourceNum }}
      </div>
    </div>
    <div class="num-card">
      <div>告警网络设备</div>
      <div class="num" :class="checkNum(alarmNum.alarmNum) ? 'red' : ''" @click="openNetMonitor('B')">
        {{ alarmNum.alarmNum }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const alarmNum = ref({
  total: 20,
  resourceNum: 18,
  alarmNum: 5
});
const checkNum = num => {
  return !!(num && num > 0);
};

const openUcenter = () => {
  window.open(`https://10.14.129.15:30000/central/index.html#/dashboardui/index.html#/out/show/bigscreen-front`, "_blank");
};
// 跳转至监控管理-网络资源监控
const openNetMonitor = type => {
  const name = "monitor_resource";
  const query: any = {
    tab: "net"
  };
  switch (type) {
    case "A":
      // 设备资产，自动筛选出资源状态异常的设备
      if (checkNum(alarmNum.value.resourceNum)) {
        router.push({ name, query });
      }
      break;
    case "B":
      // 设备资产，自动筛选出告警状态异常的设备
      if (checkNum(alarmNum.value.alarmNum)) {
        router.push({ name, query });
      }
      break;
    default:
      break;
  }
};
</script>

<style scoped lang="scss">
@import "../common.scss";
.num-main {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 16px;
  .num-card {
    .red {
      color: red;
      cursor: pointer;
    }
  }
}
</style>
